// 由于 webpack 是基于Node进行构建的，所以，webpack的配置文件中，任何合法的Node代码都是支持的
const path = require('path')

const webpack = require('webpack')

// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，
// 我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，
// 并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
	entry: path.join(__dirname, './src/main.js'),    // 入口文件
	output: { // 指定输出选项
		path: path.join(__dirname, './dist'),  // 输出路径
		filename: 'bundle.js'   // 指定输出文件的名称
	},
	mode: 'development',
	plugins: [  // 所有webpack  插件的配置节点
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'),  // 指定模板文件路径
			filename: 'index.html'  // 设置生成的内存页面的名称
		}),
		new VueLoaderPlugin()
	],
	module: { //配置所有第三方模块的
		rules: [
			{ test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理 CSS 文件的 loader
			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理 less 文件的 loader
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},  // 处理 scss 文件的 loader
			// cnpm i url-loader file-loader -D
			
			//{ test: /\.(jpg|png|jpeg|gif)$/, use: 'url-loader?limit=7630&name=[hash:8]-[name].[ext]'},  //处理图片路径的 loader
			// limit 给定的值，是图片的大小，单位是 byte(字节)， 如果我们引用的 图片，大于或等于给定的 limit值，则会被转为base64格式的字符串， 
			// 如果 图片小于给定的 limit 值，则不会被转为 base64的字符串
			// ?传参的形式 键值对中间用&连接
			// name=[name]  代表之前的名字和打包之后的名字完全一样  [ext] 代表之前的后缀名和打包之后的后缀名一样
			// [hash:8]  hash最大是32  定义hash的目的是如果图片名字一样，在内存中后一个会覆盖掉前一个，为了不让前一个覆盖掉
			// 故在名字前边加一个hash，代表是唯一的
			// 关于图片路径打包为 src= "[object Module]" 的解决方法如下写法
			{ test: /\.(jpg|png|jpeg|gif)$/, use: [{ loader:'url-loader', loader: 'file-loader',  options: {esModule: false, name: "[hash:8]-[name].[ext]", limit: 10240}}]},
			{ test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			{ test: /\.vue$/, use: 'vue-loader' }			
		]
	},
	resolve: {
		alias: { //修改 vue被导入时候的路径
			//vue$  指的是以vue结尾    main.js入口文件中的require或者import时，以vue结尾
			'vue$': 'vue/dist/vue.js'
		}
	}
}

//babel-loader7和babel8版本的问题  https://blog.csdn.net/weixin_33727510/article/details/93264765
//这里安装babel8.X版本
//首先需要安装两个包:
//第一个包: cnpm i "@babel/core" babel-loader "@babel/runtime" "@babel/plugin-transform-runtime" "@babel/plugin-proposal-class-properties" -D
//第二个包: cnpm i "@babel/preset-env" -D

//其次： 配置webpack.config.js。由于“babel-lodaer”包名字没变，api写法也没变，还是那么写 　　
//{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//处理高级ES语法的babel_lodaer

//最后： 添加.babelrc配置文件，并在该文件中写下如下配置信息 
// 　  {

//     　　　"presets": ["@babel/preset-env"],

//    　　　"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

// 　　 }